<template>
  <div>
    <a-modal v-model:visible="visible" :footer="false" width="80%">
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #color="{ record }">
          <a-tag bordered :color="record.color">{{ record.color }}</a-tag>
        </template>
      </ma-crud>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/api/prm/sys_tag.js'

const visible = ref(false)
const crudRef = ref()

const open = () => {
  visible.value = true
  crudRef.value.requestData()
}

const crud = reactive({
  autoRequest: false,
  api: api.list,
  showIndex: false,
  rowSelection: {showCheckedAll: false},
  operationColumn: true,
  operationColumnWidth: 180,
  add: {show: true, api: api.add},
  edit: {show: true, api: api.update},
  delete: {show: true, api: api.delete},
  formOption: {viewType: 'modal', width: 800},
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '标签名称', dataIndex: 'name', commonRules: [{required: true, message: '必须填写名称'}]},
  {title: '标签颜色', dataIndex: 'color', formType: 'color-picker'},
  {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, search: false},
])

defineExpose({ open })

</script>
